<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <PageLayout>
      <div class="table-container height-100">
        <EZTable
          v-loading="tableLoading" :table-id="tableId"
          :table-hdl="tableHdl" :rows="reviewList" :custom-empty="true"
          @pageChanged="getReleaseList" @sizeChanged="getReleaseList"
          @filterChange="getReleaseList">
          <EmptyContent slot="empty"></EmptyContent>
        </EZTable>
      </div>
    </PageLayout>
  </div>
</template>

<script>
  import {tableIdConfig, tableOptBtnConfig} from '@/config/table';
  import {deepCopyWithJson} from "@/utils";
  import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
  import componentReleaseTableCfg from "../../../config/table/componentRelease";
  import EZTable from '../../../components/table/EZTable.vue';
  import {componentTypeArray, componentReviewArray} from "@/config/common";

  export default {
    name: "ComponentRelease",
    components: {
      EZTable
    },
    data() {
      return {
        tableId: tableIdConfig.componentReview,
        tableLoading: true,
        tableHdl: null,
        reviewList: [],
        selectedReview: {},
      }
    },
    activated() {
      this.initTableConfig();
      this.getReleaseList();
    },
    methods: {
      initTableConfig() {
        if (this.tableHdl) return;
        const {columns = [], filters = []} = getTableConfig(this.tableId, componentReleaseTableCfg);
        assembleTableOptBtn(columns, ({type = '', data = {}}) => {
          if (!type) return;
          this.selectedReview = deepCopyWithJson(data);
        });
        this.tableHdl = new TableStateHdl(this.$route.name, this.tableId, columns, filters);
      },

      getReleaseList() {
        this.tableLoading = true;
        const tableParam = this.tableHdl.assembleTableParam();
        API.component.componentReleaseList(tableParam).then(result => {
          this.tableLoading = false;
          const {data = [], total = 0} = result;

          this.reviewList = data.map(d => {
            const componentType = componentTypeArray.find(type => type.value === d.type) || {};
            const reviewResult = componentReviewArray.find(type => type.value === d.auditResult);
            return {
              ...d,
              categoryText: componentType.label || '--',
            };
          });
          this.tableHdl.total = total;
        }).catch(err => {
          console.log('err', err)
          this.tableLoading = false;
        });
      }
    },
  }
</script>

<style scoped lang="less">

</style>
